<!DOCTYPE html>
<html lang="en">
<head>
  <title>LIAO</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bootstrap-4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
  
  <style>
  .fakeimg {
      height: 200px;
      background: #aaa;
  }
  </style>
  
    <style>
  /* Make the image fully responsive */
  .carousel-inner img {
      width: 100%;
      height: 100%;
  }
  </style>
  
  

</head>
<body>

<!--导航栏设计框架-->
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <!-- Brand/logo -->
  <a class="navbar-brand" href="#">Liao</a>
  <!-- Links -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"><!--折叠式导航栏-->
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="index.html">首页</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">联系</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="about.html">关于</a>
    </li>
	<li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
       你好
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Hello</a>
        <a class="dropdown-item" href="#">World</a>
        <a class="dropdown-item" href="#">Goodnight</a>
      </div>
    </li>
  </ul>
  </div>
    <form class="form-inline">
    <input class="form-control input-sm" type="text" placeholder="Hello World">
    <button class="btn btn-primary" type="button">Search</button>
  </form>
</nav>


<!--轮播-->
<div id="demo" class="carousel slide" data-ride="carousel">
  <!-- 指示符 -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="bootstrap-4.3.1/css/221.jpg">
	  <div class="carousel-caption">
        <h3>我们这是在哪</h3>
        <p>WHRER WE WERE</p>
    </div>
	</div>
    <div class="carousel-item">
      <img src="bootstrap-4.3.1/css/222.jpg">
	  <div class="carousel-caption">
        <h3>秘密的地方</h3>
        <p>THE SECRET PLACE</p>
    </div>
	</div>
    <div class="carousel-item">
      <img src="bootstrap-4.3.1/css/223.jpg">
	  <div class="carousel-caption">
        <h3>世界之巅</h3>
        <p>TOP OF THE WORLD</p>
    </div>
  </div>
  </div>
  <!-- 左右切换按钮 -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>


<!--主体内容设计框架-->
<div class="container" style="margin-top:30px;">
  <div class="row">

    <div class="col-sm-8">
      <h2>速度与激情</h2>
      <h5>Fast & Furious</h5>
      <img src="bootstrap-4.3.1/css/331.jpg" class="img-fluid" alt="Chania">  <!--副标题下插图-->
      <p>No matter where you are, whether it's a quarter mile away or half way across the world. The most important thing in life will always be the people in this room, right here, right now. You'll always be with me. And you'll always be my brother.</p>
      <p>无论你身处何方，无论是4分之1英里的赛道，还是绕了大半个地球的距离。我们生命中最重要的东西就是这屋檐下的人，就在此时，就在此地，你永远在我身边，也永远是我的兄弟!</p>
      <br>
      <h2>乱世佳人</h2>
      <h5>Gone with The Wind</h5>
      <img src="bootstrap-4.3.1/css/332.jpg" class="img-fluid" alt="Chania">  <!--副标题下插图-->
      <p>I love you more than I've ever loved any woman. And I've waited longer for you than I've waited for any woman.</p>
      <p>我爱你胜过我以往爱的任何一个女人，我等你的时间也比等任何女人都要长。</p>
	  </br>
      <h2>蓝莓之夜</h2>
      <h5>My Blueberry Nights</h5>
      <img src="bootstrap-4.3.1/css/333.jpg" class="img-fluid" alt="Chania">  <!--副标题下插图-->
      <p>One is always on a strange road, watching strange scenery and listening to strange music. Then one day, you will find that the things you try hard to forget are already gone.</p>
      <p>一个人总要走陌生的路，看陌生的风景，听陌生的歌，然后在某个不经意的瞬间，你会发现，原本是费尽心机想要忘记的事情真的就那么忘记了。</p>
	  
	</div>

<!--主体右边内容设计框架-->	
	    <div class="col-sm-4">
      <h2>关于我</h2>
      <h5>我的照片:</h5>
      <img src="bootstrap-4.3.1/css/8.jpg" class="img-fluid" alt="Chania">  <!--我的照片插图-->
      <p>LIAO</p>
      <h3>一些语录（点击查看详细）</h3>
  <!-- 按钮：用于打开模态框 -->
<button type="button" class="btn btn-outline-dark btn-block" data-toggle="modal" data-target="#myModal">Hello World</button>
<button type="button" class="btn btn-outline-dark btn-block" data-toggle="modal" data-target="#hello2">Forrest Gump</button>
<button type="button" class="btn btn-outline-dark btn-block" data-toggle="modal" data-target="#hello3">The Shawshank Redemption</button>
<button type="button" class="btn btn-outline-dark btn-block" data-toggle="modal" data-target="#hello4">Gone with the Wind</button>
<button type="button" class="btn btn-outline-dark btn-block" data-toggle="modal" data-target="#hello5">Moulin Rouge</button>  
  <!-- 模态框1 -->
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">LIAO</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <div class="modal-body">
		<img src="bootstrap-4.3.1/css/442.jpg" class="img-fluid" alt="Chania">
		</br>
          I wish you have a nice day.
		  </br>
		  祝您今天愉快。——《LIAO》
        </div>
        <!-- 模态框底部 -->

   
        </div>
        </div>
    </div>
	<!--模拟框2-->
	  <div class="modal fade" id="hello2">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">LIAO</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <div class="modal-body">
		<img src="bootstrap-4.3.1/css/31.jpg" class="img-fluid" alt="Chania">
		</br>
          Life was like a box of chocolates, you never know what you're going to get.
		  </br>生命就像一盒巧克力，结果往往出人意料。——《阿甘正传》
        </div>
        <!-- 模态框底部 -->

   
        </div>
        </div>
    </div>
<!--模拟框3-->
	  <div class="modal fade" id="hello3">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">LIAO</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <div class="modal-body">
		<img src="bootstrap-4.3.1/css/443.jpg" class="img-fluid" alt="Chania">
		</br>
          You know some birds are not meant to be caged, their feathers are just too bright.
		  </br>你知道，有些鸟儿是注定不会被关在牢笼里的，因为它们的每一片羽毛都闪耀着自由的光辉。——《肖申克的救赎》
        </div>
        <!-- 模态框底部 -->

   
        </div>
        </div>
    </div>
	<!--模拟框4-->
	  <div class="modal fade" id="hello4">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">LIAO</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <div class="modal-body">
		<img src="bootstrap-4.3.1/css/30.jpg" class="img-fluid" alt="Chania">
		</br>
          Tomorrow is another day.
		  </br>明天又是新的一天。——《乱世佳人》
        </div>
        <!-- 模态框底部 -->

   
        </div>
        </div>
    </div>
	<!--模拟框5-->
	  <div class="modal fade" id="hello5">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">   
        <!-- 模态框头部 -->
        <div class="modal-header">
          <h4 class="modal-title">LIAO</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- 模态框主体 -->
        <div class="modal-body">
		<img src="bootstrap-4.3.1/css/441.jpg" class="img-fluid" alt="Chania">
		</br>
         The greatest thing you'll ever learn is just to love and be loved in return.
		  </br>世上最美好的事莫过于爱与被爱。——《红磨坊》
        </div>
        <!-- 模态框底部 -->

   
        </div>
        </div>
    </div>

</div>
 </div>
</div>
<!--底部设计框架-->
<div class="jumbotron text-center" style="margin-bottom:0">
<a href="demo.html">还有下一页噢，请点击</a>
  <p>LIAO (C) 2019</p>
</div>

</body>
</html>